<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&nbsp;&nbsp;&nbsp;开始蜂蜜之约</title>
    <link rel="stylesheet" href="{$Think.const.CSS_URL}regist.css" type="text/css">
    <link rel="stylesheet" href="{$Think.const.CSS_URL}bootstrap.min.css" type="text/css">
    <script src = "{$Think.const.JS_URL}jquery-2.2.3.min.js"></script>
    <script src="{$Think.const.JS_URL}bootstrap.js"></script>
</head>
<body>
<!--标题栏-->
<div class="header">
    <div class = "container">
        <div class = "header_left">
            <a href="../Index/index.html"><img src="{$Think.const.img_URL}logo.png"></a>
            <span>Honey Store</span>
        </div>
    </div>
</div>
<!--图片，表单栏-->
<div class = "login-panel" >
    <div class = "container">
        <div class = "show_img">
            <img src="{$Think.const.img_url}login-img.jpg">
        </div>
        <div class = "form" >
            <form class="form-horizontal" role="form" method="post" action="regist">
                <div class = "form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-9">
                        <span class = "navbar-left">欢迎注册</span>
                        <span class = "navbar-right">已有账号，<a href="login">直接登陆</a></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control"  data-placement="top"
                                data-content="输入正确用户名"
                               id="username" name = "u_name" placeholder="请输入您的用户名" autofocus>
                    </div>
                </div>

                <div class="form-group">
                    <label for="psd1" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" data-placement="top"
                               data-content="输入正确密码"
                               id="psd1" name = "psd" placeholder="密码由6-15位字母，数字组合">
                    </div>
                </div>

                <div class="form-group">
                    <label for="psd2" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" data-placement="top"
                               data-content = "输入与上面相同密码"
                               id="psd2" placeholder="再此输入上面的密码">
                    </div>
                </div>

                <div class="form-group">
                    <label for="phone" class="col-sm-2 control-label">联系方式</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" data-placement="top"
                              data-content="输入正确联系方式"
                               id="phone" name = "u_phone" placeholder="请输入手机号/家庭号">
                    </div>
                </div>

                <div class = "form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <label class = "radio-inline radio_button">
                        <input type="radio" name="sex" id="male" value="男" checked>男
                    </label>
                    <label class = "radio-inline">
                        <input type="radio" name="sex" id="female" value="女">女
                    </label>
                </div>

                <div class="form-group">
                    <label for="psd2" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control code" id="code" name ="code" placeholder="请输入验证码">
                        <img class = "verify" id = "verify" src = "verifyImg" alt = "验证码" />
                    </div>
                </div>
                <!--onclick="this.src = 'verifyImg/'+Math.random()"-->
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn submit_button" id = "login">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--专利栏-->
<div class = "footer">
    <div class = "container">
        <p>Copyright 2008-2015 Sanshengsuo.com，All Rights Reserved ICP证：粤 B2-XXXXXXXXX</p>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    window.onload = attachEvent;
    function attachEvent(){
        $("#username").blur(checkUserName);//检测用户名输入框是否为空
        $("#psd1").blur(checkPsw);//检测密码输入框是否为空
        $("#psd2").blur(checkPsw2);//检测两次密码是否一致
        $("#phone").blur(checkPhone);//检测手机号码是否符合
        $("#login").blur(checkForm);//检测整个表
        $("#verify").click(changeVerify);//点击换验证码
    }

    function checkUserName(){
        if($("#username").val() == ""){
            $("#username").addClass("error");
            return false;
        }
        else{
            $("#username").removeClass('error');
            return true;
        }
    }
    function checkPsw() {
        if ($("#psd1").val() == "") {
            $("#psd1").addClass("error");
            return false;
        }
        else {
            $("#psd1").removeClass('error');
            return true;
        }
    }

    function checkPsw2(){
        if($("#psd2").val() != $("#psd1").val()){
            $("#psd2").addClass("error");
            return false;
        }
        else{
            $("#psd2").removeClass('error');
            return true;
        }
    }

    function checkPhone(){
        if($("#phone").val() == ""||!/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/i.test($("#phone").val())){
            $("#phone").addClass("error");
            return false;
        }
        else {
            $("#phone").removeClass('error');
            return true;
        }
    }

    function checkForm(){
        if(!checkPsw()||!checkUserName()||!checkPsw2()||!checkPhone())
            return false;
        return true;
    }

    function changeVerify(){
        var change = "verifyImg/"+Math.random();
        $("#verify").attr("src",change);
    }
</script>